<template>
  <div class="login">
    <div class="nav-bar">
      <NavBar />
    </div>

    <!-- <img src="@/assets/logo.png" alt="" style="width: 250px; height: 80px; position: absolute; left: 280px ; top: 20px;"> -->

    <div class="container">
      <div class="title">
        <p>微信扫码关注公众号</p>
        <p>发送"验证码"即可获取验证码登录</p>
      </div>
      <div class="qr">
        <img src="@/assets/qr.jpg" alt="" />
      </div>
      <div class="wrapper">
        <el-input placeholder="请输入验证码" v-model="validCode"></el-input>
        <el-button type="primary" plain @click="login" style="margin-left: 10px"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>


<script setup>
import useUserStore from "@/store/modules/user";
import { ref } from "vue";
import { ElMessage, ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import time from "@/utils/time";
import NavBar from "@/layout/header/index.vue";

let userStore = useUserStore();
let $router = useRouter();

// 验证码
let validCode = ref("");

// 登录
const login = async () => {
  if (!validCode.value.trim()) {
    ElMessage.warning("请输入验证码");
    return;
  }

  userStore
    .userLogin(validCode.value)
    .then((res) => {
      setTimeout(() => {
        $router.push("/subject");
        // 登录成功的提示信息
        ElNotification({
          type: "success",
          message: "登录成功",
          title: `Hi ${time()}`,
        });
      }, 0);
    })
    .catch((error) => {
      // 登录失败的提示信息
      ElNotification({
        type: "error",
        message: "登录失败",
      });
    });
};
</script>

<style scoped lang="scss">
.login {
  font-family: "Quicksand", sans-serif;
  height: 100vh;
  width: 100%;
  position: relative;
  background: url("@/assets/bg3.jpg") no-repeat;
  background-size: cover;

  .nav-bar {
    width: 100%;
    height: 55px;
  }
  .container {
    width: 400px;
    height: 500px;
    background-color: rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.132);
    backdrop-filter: blur(10px);

    .title {
      color: #858585;
      text-align: center;
      margin: 20px 0 0 0;
    }
    .qr {
      width: 100%;
      display: flex;
      justify-content: center;
      margin: 10px 0;
      img {
        width: 60%;
      }
    }
    .wrapper {
      width: 65%;
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>